<template>
    <div class="app-container">
       <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="82px">
         <el-form-item label="区域名称" prop="areaId">
            <el-tree-select v-model="queryParams.areaId" :data="areaOptions" clearable style="width: 240px" @change="areaChange" filterable
                  :props="{ label: 'name', children: 'areaList' }" node-key="areaCode" :check-strictly="true"
                  @keyup.enter="handleQuery"
                  placeholder="请选择区域" :render-after-expand="false" default-expand-all  controls-position="right" />
          </el-form-item>
          <el-form-item label="联系人" prop="contactName">
            <el-select filterable v-model="queryParams.contactName" clearable placeholder="请选择联系人" controls-position="right" style="width: 240px">
                  <el-option  v-for="item in idOptions"  @keyup.enter="handleQuery" :key="item.id"  :label="item.contactsName+(item.phoneNumber?item.phoneNumber:'')" :value="item.contactsName" />
            </el-select>
          </el-form-item>
          <el-form-item label="预警等级" prop="warningLevel">
             <el-select v-model="queryParams.warningLevel" clearable placeholder="请选择预警等级" style="width: 240px"
                @keyup.enter="handleQuery">
                <el-option v-for="item in sys_warning_level" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
          </el-form-item>
          <el-form-item label="预警方式" prop="warningWay">
             <el-select v-model="queryParams.warningWay" clearable placeholder="请选择预警方式" style="width: 240px"
                @keyup.enter="handleQuery">
                <el-option v-for="item in sys_warning_way" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
          </el-form-item>
          <el-form-item label="预警类型" prop="warningType">
            <el-select v-model="queryParams.warningType" clearable placeholder="请选择预警类型" style="width: 240px"
               @keyup.enter="handleQuery">
               <el-option v-for="item in sys_warning_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
         </el-form-item>
          <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
       <!-- <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['contact:add']">新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
               v-hasPermi="['contact:edit']">修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
               v-hasPermi="['contact:remove']">删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport"
               v-hasPermi="['contact:export']">导出</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row> -->
       <!-- 表格数据 -->
       <el-table v-loading="loading" :data="roleList" >
          <!-- <el-table-column label="联系人编号" align="center" prop="id" width="120" /> -->
          <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true" />
          <el-table-column label="区域名称" align="center" prop="areaName" :show-overflow-tooltip="true" />
          <el-table-column label="预警类型" align="center" prop="warningType" width="150" :show-overflow-tooltip="true" >
            <template #default="scope">
               {{ sys_warning_type.find(item => item.value == scope.row.warningType)?.label }}
            </template>
         </el-table-column>
          <el-table-column label="预警等级" align="center" prop="warningLevel" :show-overflow-tooltip="true" >
            <template #default="scope">
               {{ sys_warning_level.find(item => item.value == scope.row.warningLevel)?.label }}
            </template>
          </el-table-column>
          <el-table-column label="预警方式" align="center" prop="warningWay" :show-overflow-tooltip="true" >
            <template #default="scope">
               {{ sys_warning_way.find(item => item.value == scope.row.warningWay)?.label }}
            </template>
            </el-table-column>
          <el-table-column label="预警内容" align="center" prop="warningContent" :show-overflow-tooltip="true" />
          <el-table-column label="预警联系人" align="center" prop="warningContact" :show-overflow-tooltip="true" />
          <el-table-column label="通知状态" align="center" prop="warningStatus" :show-overflow-tooltip="true" >
            <template #default="scope">
               {{ sys_warning_status.find(item => item.value == scope.row.warningStatus)?.label }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="150">
             <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
            <template #default="scope">
               <el-tooltip content="修改" placement="top">
                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['contact:edit']"></el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['contact:remove']"></el-button>
               </el-tooltip>
            </template>
         </el-table-column> -->
       </el-table>
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
          <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="区域名称" prop="areaId">
               <el-select  v-model="form.areaId" @change="areaChange" placeholder="请选择区域名称" controls-position="right">
                  <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.name" :value="item.areaCode" />
               </el-select>
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
               <el-input v-model="form.deviceName" controls-position="right" maxlength="11" />
            </el-form-item>
            <el-form-item label="预警联系人" prop="warningContact">
               <el-input v-model="form.warningContact" controls-position="right" />
            </el-form-item>
            <el-form-item label="预警内容" prop="warningContent">
               <el-input v-model="form.warningContent" controls-position="right" />
            </el-form-item>
            <el-form-item label="预警等级" prop="warningLevel">
               <el-select v-model="form.warningLevel" placeholder="请选择预警等级" controls-position="right">
                  <el-option v-for="item in sys_warning_type" :key="item.id" :label="item.name" :value="item.id" />
               </el-select>
            </el-form-item>
            <el-form-item label="预警类型" prop="warningType">
               <el-select v-model="form.warningType" placeholder="请选择预警类型" controls-position="right">
                  <el-option v-for="item in sys_warning_type" :key="item.id" :label="item.name" :value="item.id" />
               </el-select>
            </el-form-item>
            <el-form-item label="预警方式" prop="warningWays">
               <el-checkbox-group v-model="form.warningWays">
                  <el-checkbox label="0">电话</el-checkbox>
                  <el-checkbox label="1">钉钉</el-checkbox>
                  <el-checkbox label="2">邮箱</el-checkbox>
                  <el-checkbox label="3">短信</el-checkbox>
               </el-checkbox-group>
            </el-form-item>
            <el-form-item label="通知状态" prop="warningStatus">
               <el-select v-model="form.warningStatus" placeholder="请选择通知状态" controls-position="right">
                  <el-option v-for="item in [{name:'已发送',value:'1'},{name:'未发送',value:'0'}]" :key="item.value" :label="item.name" :value="item.value" />
               </el-select>
             </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
    </div>
 </template>
 
 <script setup name="info">
 import { pageMessage,add,update,del} from "@/api/alarm/info";
  import {treeArea} from '@/api/area.js'
  import {listContact} from '@/api/alarm/contact'

 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_warning_type,sys_warning_level,sys_warning_way,sys_warning_status } = proxy.useDict("sys_warning_type","sys_warning_level","sys_warning_way","sys_warning_status");
 const options = ref([])
 const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const dateRange = ref([]);
 const deptOptions = ref(undefined);
const menuRef = ref(null);
 const title = ref()
//人员
const idOptions = ref([])

 /** 导出按钮操作 */

function handleExport() {
   proxy.download("warning/message/export", {
      ...queryParams.value,
   }, `role_${new Date().getTime()}.xlsx`);
}
/** 新增 */
function handleAdd() {
   reset();
   open.value = true;
   title.value = "添加详情";
}
/** 修改 */
function handleUpdate(row) {
   reset();
   getContact(row.id).then((res) => {
      console.log('详情', res)
      form.value = res.data;
      open.value = true;
   }).catch(() => {
      form.value = row;
      open.value = true;
   })
   title.value = "修改详情";
}

/** 删除按钮操作 */
function handleDelete(row) {
   const Ids = [row.id] || ids.value;
   proxy.$modal.confirm('是否确认删除联系人编号为"' + Ids + '"的数据项?').then(function () {
      return del(Ids);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
}
/** 重置新增的表单以及其他数据  */
function reset() {
   if (menuRef.value != undefined) {
      menuRef.value.setCheckedKeys([]);
   }
   form.value = {
      id: undefined,
      coutactsName: undefined,
      status: '0',
   };
   proxy.resetForm("roleRef");
}

 const data = reactive({
    form: {},
    queryParams: {
       pageNum: 1,
       pageSize: 10,
       roleName: undefined,
       roleKey: undefined,
       status: undefined
    },
    rules: {
      areaId: [{ required: true, message: "区域名称不能为空", trigger: "blur" }],
      warningType: [{ required: true, message: "预警类型不能为空", trigger: "blur" }],
      deviceName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
      warningContact: [{ required: true, message: "预警联系人不能为空", trigger: "blur" }],
      warningWay: [{ required: true, message: "预警方式不能为空", trigger: "blur" }],
   },
 });
 const warningLevelOptions = ref([
      {id:'0',name:'无'},
      {id:'1',name:'低'},
      {id:'2',name:'中'},
      {id:'3',name:'高'},
])
const warningWaysOptions = ref([
      {id:'0',name:'电话'},
      {id:'1',name:'钉钉'},
      {id:'2',name:'邮箱'},
      {id:'3',name:'短信'},
])
 const { queryParams, form, rules } = toRefs(data);
 
const areaOptions = ref([])

 /** 查询部门下拉树结构 && 查询单位下拉选择 */
 function getDeptTree() {
   treeArea().then(response=>{
      areaOptions.value = response.data
   })
   listContact({status:0}).then(response=>{
      idOptions.value = response.data
   })
 };
 function submitForm() {
   proxy.$refs["roleRef"].validate(valid => {
      if (valid) {
         form.value.areaName = areaOptions.value.find(el=>el.areaCode == form.value.areaId).name
         if (form.value.id != undefined) {
            //联系人
            update(form.value).then(response => {
               proxy.$modal.msgSuccess("修改成功");
               open.value = false;
               getList();
            });
         } else {
            add(form.value).then(response => {
               proxy.$modal.msgSuccess("新增成功");
               open.value = false;
               getList();
            });
         }
      }
   });
}
 /** 查询联系人列表 */
 function getList() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    pageMessage(proxy.addDateRange(queryParams.value)).then(response => {
       roleList.value = response?.data?.rows;
       total.value = response?.data?.total;
       loading.value = false;
    });
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
    dateRange.value = [];
    queryParams.value.createTimeStart = undefined
    queryParams.value.createTimeEnd = undefined
    proxy.resetForm("queryRef");
    handleQuery();
 }
 getDeptTree();
 getList();
 </script>
 